<template>
  <div class="param-info" v-if="paramInfo">
    <table class="table-size" v-if="paramInfo.sizes">
      <tr v-for="(tr, index) in paramInfo.sizes[0]" :key="index">
        <td v-for="(td, index) in tr" :key="index">{{ td }}</td>
      </tr>
    </table>
    <table class="table-info">
      <tr v-for="(item, index) in paramInfo.info" :key="index">
        <td>{{ item.key }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </table>
    <div class="info-img" v-if="paramInfo.image">
      <img :src="paramInfo.img" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    paramInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style scoped>
.param-info {
  padding: 20px 10px 10px;
  font-size: 14px;
}
.table-size,
.table-info {
  width: 100%;
  padding-top: 20px;
  border-bottom: 2px solid #ececec;
  border-top: 2px solid #ececec;
}
.table-size tr,
.table-info tr {
  height: 30px;
  padding-bottom: 10px;
}
.table-info tr :nth-child(1),
.table-size tr :nth-child(1) {
  width: 47px;
}
.table-info tr td:nth-child(n + 2) {
  color: #ff649e;
}

tr :nth-child(2) {
  padding-left: 50px;
}
</style>